<template>
	<div class="goodType_div" v-if="goodTypeShow">
		<div class="goodType_content">
			<p class="btn_close" @click="btn_close">X</p>
			<div class="youlike_li">
		    	<div class="youlike_img_div">
		    		<img src="../../assets/img/Bitmap.png" alt="" style="width: 100%;height: 100%;">
		    	</div>
		    	<div class="youlike_info">
		    		<p>{{goodDefault.name1}}</p>
		    		<p>{{goodDefault.normName}}</p>
		    		<p class="youlike_price">
		    			<span class="fl">￥{{goodDefault.mallMobilePrice}}</span>
		    		</p>
		    	</div>
		    	
		    </div>
		    <div class="type_content">
		    	<div v-for="(item,index) in goodNorms">
		    		<p class="type_title">{{item.name}}</p>
		    		<p class="type_con" :class="'heng_'+index">
		    			<span :class="item1.selected?'type_checked':''"  v-for="item1 in item.attrList" @click="typeCheck(item,item1)">{{item1.name}}</span>
		    		</p>
		    		
		    	</div>
	    		<p  class="type_title">数量</p>
	    		<div class="btn_num_area">
	    			<p @click="btn_goodNumMinus">-</p>
	    			<p><input type="text" name="" v-model="goodNum"></p>
	    			<p @click="btn_goodNumPlus">+</p>
	    		</div>
	    	</div>
		</div>
	</div>
</template>
<script>
	export default{
		name:'goodType',
		data(){
			return {
				goodNum:1,
				typeCheckInde:0,
				selCancle:true, // 默认选中状态，需要和
				typeCheckId:'', //
				hasCheckArr:[],
				_obj: {}
			}
		},
		props:['goodTypeShow'],
		methods:{
			btn_close:function(){
				//this.goodTypeShow = false;
				this.$emit("listen",false)
			},
			//货品  规格 选择
			typeCheck:function(item,item1){//inde表示 当前规格大类的第几项，比方说有颜色和版本两大类。inde:0 表示颜色，1表示 版本
				for(var i = 0; i<item.attrList.length; i++){
					item.attrList[i].selected = false;
					var _ind = this.hasCheckArr.indexOf(item.attrList[i].id);
					if(_ind>0){
						this.hasCheckArr.splice(_ind,1)
					}
				}
				this.hasCheckArr.push(item1.id)
				item1.selected = true;
				var _str = "";
				for(var i = 0 ;i<this.hasCheckArr.length; i++){
					_str += this.hasCheckArr[i]+',';
				}
				_str = _str.substring(0,_str.length-1);
				this.$store.state.goods.curGoodNormId = _str;//'44,'+item1.id;
				this.$store.dispatch("get_goodChange");
			},
			//
			btn_goodNumMinus:function(){
				if(this.goodNum>0){
					this.goodNum--;
				}else{
					this.goodNum = 0;
				}
				this.$store.state.goods.data_goodNum = this.goodNum;
			},
			btn_goodNumPlus:function(){
				this.goodNum++;
				this.$store.state.goods.data_goodNum = this.goodNum;
			}
		},
		computed:{
			goodDefault(){
				if(this.$store.state.goods.data_goodDefault == undefined){
					return false;
				};
				//当前显示的货品ID
				this.$store.state.goods.curHuoPinId = this.$store.state.goods.data_goodDefault.id;
				return this.$store.state.goods.data_goodDefault;
			},
			goodNorms(){
				if(this.$store.state.goods.data_goodNorms == undefined){
					return false;
				}
				var _res = this.$store.state.goods.data_goodNorms;
				var _arr = [];
				var _map = _res.map(function(item){
					for(var i = 0; i<item.attrList.length; i++){
						if(item.attrList[i].selected === true){
							_arr.push(item.attrList[i].id)
						}
					}
				})
				this.hasCheckArr = _arr;
				return this.$store.state.goods.data_goodNorms;
			}
		}
	}
</script>
<style rel="stylesheet" lang="scss" scoped>
	@import "../../assets/css/main.scss";
	.goodType_div{
		
	    position: relative;
	    position: fixed;
	    background: #F5F5F5;
	    width: 100%;
	    height: 100%;
	    top: 0;
	    bottom: 0;
	    	z-index: 1;
	    .goodType_content{
	        box-sizing: border-box;
	    	padding: 0.8rem 0;
	    	position: absolute;
	    	bottom: 1.2rem;
	    	width: 100%;
	    	background-color: #FFF;
	    	.btn_close{
	    		position: absolute;
			    right: 0;
			    top: 0;
			    width: 30px;
			    height: 30px;
			    line-height: 30px;
			    text-align: center;
	    	}
	    	.youlike_li{
	    		padding-top: 0;
	    	}
	    	.type_content{
	    		padding: 0.4rem;
		    	.type_title{
		    		font-size: 15px;
				    color: #000000;
				    height: 20px;
				    line-height: 20px;
				    margin-bottom: 10px;
		    	}
		    	.type_con{
					margin-bottom:0.2667rem;
			    	span{
			    		display: inline-block;
			    		padding: 0 0.1333rem;
			    		height: 0.8rem;
			    		line-height: 0.8rem;
			    		text-align:center;
			    		border: 1px solid #DCDCDC;
						border-radius: 2px;
						min-width: 1.8667rem;
			    	}
					& span+span{
						margin-left: 0.2667rem !important;
					}
					.type_checked{
						border-color: #FF7D37;
						color: #FF7D37 !important;
					}
		    	}
		    	.btn_num_area{
		    		position: inherit;
				    width: 87px;
		    	}
	    	}
	    }
	}
</style>